<template>
    <div class="tab-bar">
        <div class="tab-bar-item" @click="changeclass(1)" :class="{active:currentindex==1}">
            <img v-if="currentindex==1" class="active" src="../../assets/img/tabbar/tab_home_active.png" alt="">
            <img v-else src="../../assets/img/tabbar/tab_home.png" alt="">
            <span class="text">首页</span>
        </div>
        <div class="tab-bar-item" @click="changeclass(2)" :class="{active:currentindex==2}">
            <img v-if="currentindex==2" class="active" src="../../assets/img/tabbar/tab_order_active.png" alt="">
            <img v-else src="../../assets/img/tabbar/tab_order.png" alt="">
            <span class="text">订单</span>
        </div>
        <div class="tab-bar-item" @click="changeclass(3)" :class="{active:currentindex==3}">
            <img src="../../assets/img/tabbar/tab_message.png" alt="">
            <span class="text">消息</span>
        </div>
        <div class="tab-bar-item" @click="changeclass(4)" :class="{active:currentindex==4}">
            <img v-if="currentindex==4" class="active" src="../../assets/img/tabbar/tab_favor_active.png" alt="">
            <img v-else src="../../assets/img/tabbar/tab_favor.png" alt="">
            <span class="text">喜爱</span>
        </div>

    </div>
  
</template>

<script setup>
import { useRouter ,useRoute} from 'vue-router';
import {ref, watch} from 'vue'
   const currentindex=ref(0);
   const router=useRouter();
   const route=useRoute();
   const routes = [
        { path: '/home' },   // 首页
        { path: '/order' },  // 订单
        { path: '/message' }, // 消息
        { path: '/favor' }   // 喜爱
        ];
   const changeclass=(index)=>{
       currentindex.value=index;
      
        router.push(routes[index-1].path)
   }
   watch(route,(newroute)=>{
    const index=routes.findIndex((item)=>item.path==newroute.path);
    currentindex.value=index+1;
   })

</script>

<style lang="less" scoped>
    .tab-bar{
        position: fixed;
        bottom: 0px;
        left: 0px;
        right:0px;
        height: 50px;
        display: flex;
        background-color: #fff;
        z-index: 999;
        border-top:1px solid hsl(0, 8%, 97%);
        .tab-bar-item{ 
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
            .text{
                font-size: 12px;
            }
            &.active{
                color:#ff9854
            };
            img{
                width: 32px;
            }
        } 
    }
    
</style>